<template>
    <baidu-map style="margin-top: 5px" class="map" :center="{lng: 117.102, lat: 39.097}" :zoom="28"
               scroll-wheel-zoom="true" :mapStyle="mapStyle"><!--  {lng: 116.404, lat: 39.915}-->
        <!--比例尺和定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--        <bm-marker-->
<!--                :position="{lng: 116.404, lat: 39.915}"-->
<!--                :dragging="false"-->
<!--                animation="BMAP_ANIMATION_BOUNCE"-->
<!--                :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}">-->
<!--        </bm-marker>-->
        <bm-marker :position="{lng: 117.102, lat: 39.097}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-label content="城建游泳馆" :labelStyle="{color: 'blue', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
    </baidu-map>
    <!--自定义图标-->

</template>

<script>
    export default {
        name: "BaiDuMapSelf",
        data() {
            return {
                mapStyle: {
                    styleJson: [
                        {
                            "featureType": "all",
                            "elementType": "geometry",
                            "stylers": {
                                "hue": "#007fff",
                                "saturation": 89
                            }
                        },
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#ffffff"
                            }
                        }
                    ]
                },
            }

        }
    }
</script>

<style lang="less">
    .map {
        margin: 0 8px;
        width: 98%;
        height: 70vh;
    }
</style>
